<template>
  <div id="createComment">
    <el-dialog
      :visible.sync="dialogData.isShow"
      :show-close="false"
      width="500px"
    >
      <!-- 添加文件部分 -->
      <div class="form-box">
        <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="批量导入dp号" name="first">
            <div class="upload-box">
              <el-upload
                action="#"
                accept=".xlsx,.xls"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="changeUpload"
              >
                <el-input
                  v-model="fileName"
                  disabled
                  placeholder="请选择上传文件..."
                ></el-input>
                <el-button type="primary" class="upload_btn">
                  <div class="fa fa-folder-open"></div>
                  添加文件
                </el-button>
              </el-upload>

              <div
                style="flex-direction:column;width:100%;padding:20px 0;display:flex;justify-content:center;align-items:center"
              >
                <div style="width:90%">
                  1、仅支持Excel格式文件
                </div>
                <div style="width:90%">
                  2、单次最大上传量100000条，总上传量300000条;
                </div>
                <div style="width:90%">
                  3、同时只能使用一种文件模板；
                </div>
                <div style="width:90%">
                  4、点击下载：<span
                    style="color:green;cursor:pointer"
                    @click="downloadTemplete"
                    >dp号模板</span
                  >
                </div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="批量导入UID" name="second">
            <div class="upload-box">
              <el-upload
                action="#"
                accept=".xlsx,.xls"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="changeUpload"
              >
                <el-input
                  v-model="fileName"
                  disabled
                  placeholder="请选择上传文件..."
                ></el-input>
                <el-button type="primary" class="upload_btn">
                  <div class="fa fa-folder-open"></div>
                  添加文件
                </el-button>
              </el-upload>

              <div
                style="flex-direction:column;width:100%;padding:20px 0;display:flex;justify-content:center;align-items:center"
              >
                <div style="width:90%">
                  1、仅支持Excel格式文件
                </div>
                <div style="width:90%">
                  2、单次最大上传量100000条，总上传量300000条；
                </div>
                <div style="width:90%">
                  3、同时只能使用一种文件模板；
                </div>
                <div style="width:90%">
                  4、点击下载：<span
                    style="color:green;cursor:pointer"
                    @click="downloadTemplete"
                    >UID模板</span
                  >
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('form')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  download,
  uploadFile,
  downloadForDpCount,
  uploadFileForDpCount
} from '@/api/notice'

export default {
  props: ['dialogData'],
  data() {
    return {
      activeName: 'first',
      loading: false,
      fileName: '',
      upFile: null,
      activeObj: {
        type: 'dps',
        downUrl: '',
        uploadUrl: ''
      }
    }
  },
  created() {
    this.activeObj.type = 'dps'
    this.activeObj.downUrl = downloadForDpCount()
    this.activeObj.uploadUrl = uploadFileForDpCount()
  },
  methods: {
    handleClick(val) {
      this.activeName = val.name
      if (this.activeName === 'first') {
        this.activeObj.type = 'dps'
        this.activeObj.downUrl = downloadForDpCount()
        this.activeObj.uploadUrl = uploadFileForDpCount()
      } else {
        this.activeObj.type = 'uds'
        this.activeObj.downUrl = download()
        this.activeObj.uploadUrl = uploadFile()
      }
    },
    // 文件上传成功
    changeUpload: function(file, fileList) {
      //校验格式
      let FileExt = file.name.replace(/.+\./, '')
      if (FileExt !== 'xlsx' && FileExt !== 'xls') {
        this.$message({ message: '文件格式错误！', type: 'warning' })
        return
      }

      this.fileName = file.name
      this.upFile = file.raw
    },

    // 下载模板按钮
    downloadTemplete() {
      let url = this.activeObj.downUrl
      this.msgDown('get', url, '', '上传用户信息表')
    },

    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
    },

    /* 确认提交 */
    confirmLabel() {
      if (!this.fileName) {
        this.$message({ message: '请添加文件！', type: 'warning' })
        return
      }
      this.loading = true
      let url = this.activeObj.uploadUrl
      let formData = new FormData()
      formData.append('file', this.upFile)
      this.msgRequire(
        'post',
        url,
        formData,
        (response) => {
          this.loading = false
          this.$emit('showResults', response, true, this.activeObj.type)
          this.cancelLabel()
        },
        (err) => {
          // 有上传失败的情况，弹出失败提示窗
          this.loading = false
          this.$emit('showResults', err, false, this.activeObj.type)
          this.$emit('refresh')
          this.cancelLabel()
        }
      )
    }
  }
}
</script>

<style lang="less">
#createComment {
  .upload-box {
    padding: 30px;
    // padding-left: 30px !important;
    .el-input {
      float: left;
      border-radius: 0;
      width: 275px !important;
      .el-input__inner {
        border-radius: 0 !important;
      }
    }
    .upload_btn {
      float: left;
      height: 32px;
      border-radius: 0;
      background: #1dc8a4;
      border: none;
    }
    .download_btn {
      margin: 10px 0;
    }
    .tip {
      color: #ff0000;
      margin-bottom: 30px;
    }
  }

  .el-dialog .el-dialog__header {
    border-bottom: none;
    padding: 10px;
  }

  .el-dialog .el-dialog__body {
    padding: 0;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item {
    padding: 0 82px;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: #fff;
    background: #1dc8a4;
    color: white;
  }
}
</style>
